<template>
  <div class="addOrganization">
    <div class="infoContent">
      <el-row :gutter="1">
        <el-col
          :offset="1"
          :span="11"
        >
          <el-form
            ref="form1"
            :disabled="addOrganizationType == 2"
            :model="organizationInfo"
            :rules="rules"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-form-item
              label="组织编码:"
              prop="encode"
            >
              <el-input v-model="organizationInfo.encode" :disabled="addOrganizationType != 0" />
            </el-form-item>
            <el-form-item
              label="统一社会信用代码:"
              prop="enterpriseCode"
            >
              <el-input v-model="organizationInfo.enterpriseCode" />
            </el-form-item>
            <template
              v-if="
                !(organizationInfo.tradeType == 2 || organizationInfo.tradeType == 3)
              "
            >
              <el-form-item label="组织类型:">
                <el-select
                  v-model="organizationInfo.type"
                  style="width:100%"
                >
                  <el-option
                    v-for="(item, i) of typeList"
                    :key="i"
                    :value="item.encode"
                    :label="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="单位属性:">
                <el-select
                  v-model="organizationInfo.unitType"
                  style="width:100%"
                >
                  <el-option
                    v-for="(item, i) of unitTypeList"
                    :key="i"
                    :value="item.encode"
                    :label="item.name"
                  />
                </el-select>
              </el-form-item>
            </template>
            <el-form-item label="单位负责人:">
              <el-input v-model="organizationInfo.manager" />
            </el-form-item>
            <template
              v-if="
                !(
                  organizationInfo.tradeType == 2 ||
                  organizationInfo.tradeType == 3
                )
              "
            >
              <el-form-item label="财务负责人:">
                <el-input v-model="organizationInfo.finance" />
              </el-form-item>
              <el-form-item label="联系人:">
                <el-input v-model="organizationInfo.linkman" />
              </el-form-item>
            </template>
          </el-form>
        </el-col>
        <el-col :span="11">
          <el-form
            ref="form2"
            :disabled="addOrganizationType == 2"
            :model="organizationInfo"
            :rules="rules"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-form-item
              label="组织名称:"
              prop="name"
            >
              <el-input v-model="organizationInfo.name" />
            </el-form-item>
            <el-form-item
              label="行业属性:"
              prop="tradeType"
            >
              <el-select
                v-model="organizationInfo.tradeType"
                style="width:100%"
              >
                <el-option
                  v-for="(item, i) of tradeTypeList"
                  :key="i"
                  :value="item.encode"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
            <template
              v-if="
                !(organizationInfo.tradeType == 2 || organizationInfo.tradeType == 3)
              "
            >
              <el-form-item label="预算级次:">
                <el-input v-model="organizationInfo.budgetLevel" />
              </el-form-item>
              <el-form-item label="单位性质:">
                <el-input v-model="organizationInfo.unitNature" />
              </el-form-item>

            </template>
            <el-form-item label="联系电话:">
              <el-input v-model="organizationInfo.managerMobile" />
            </el-form-item>
            <template
              v-if="
                !(
                  organizationInfo.tradeType == 2 ||
                  organizationInfo.tradeType == 3
                )
              "
            >
              <el-form-item label="联系电话:">
                <el-input v-model="organizationInfo.financeMobile" />
              </el-form-item>
              <el-form-item label="联系电话:">
                <el-input v-model="organizationInfo.linkmanMobile" />
              </el-form-item>
            </template>
          </el-form>
        </el-col>
      </el-row>
      <template
        v-if="
          !(organizationInfo.tradeType == 2 || organizationInfo.tradeType == 3)
        "
      >
        <el-row :gutter="1">
          <el-col
            :offset="1"
            :span="22"
          >
            <el-form
              :disabled="addOrganizationType == 2"
              label-width="150px"
              class="demo-ruleForm"
            >
              <el-form-item
                label="地址:"
                prop="name"
              >
                <el-input v-model="organizationInfo.address" />
              </el-form-item>
            </el-form>
          </el-col>
          <el-col
            :offset="1"
            :span="22"
          >
            <div class="red-line" />
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col
            :offset="1"
            :span="11"
          >
            <el-form
              :disabled="addOrganizationType == 2"
              label-width="150px"
              class="demo-ruleForm"
            >
              <el-form-item label="核编人数:">
                <el-input v-model="organizationInfo.formationNum" />
              </el-form-item>
              <el-form-item label="离退休人数:">
                <el-input v-model="organizationInfo.retireNum" />
              </el-form-item>
              <el-form-item label="对应部门:">
                <el-input v-model="organizationInfo.deptName" />
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="11">
            <el-form
              :disabled="addOrganizationType == 2"
              label-width="150px"
              class="demo-ruleForm"
            >
              <el-form-item label="在职人数:">
                <el-input v-model="organizationInfo.jobNum" />
              </el-form-item>
              <el-form-item label="临时人数:">
                <el-input v-model="organizationInfo.temproaryNum" />
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col
            :offset="1"
            :span="22"
          >
            <el-form
              :disabled="addOrganizationType == 2"
              label-width="150px"
              class="demo-ruleForm"
            >
              <el-form-item label="单位印鉴:">
                <div style="width:auto;text-align:left">
                  <image-upload v-model="organizationInfo.unitSeal" :limit="1" list-type="picture-card" />
                  <el-dialog
                    :visible.sync="dialogVisible"
                    append-to-body
                  >
                    <img
                      :src="dialogImageUrl"
                      width="100%"
                    >
                  </el-dialog>
                </div>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </template>
      <p
        v-if="addOrganizationType != 2"
        class="stepCon"
      >
        <span
          class="greenBtn"
          @click="$emit('update:addOrganizationShow', false)"
        >取消</span>
        <span
          class="greenBtn"
          @click="saveOrg"
        >保存</span>
      </p>
    </div>
  </div>
</template>
<script>
import { addOrg, updateOrg } from '@/api/organization/'
// import ImageUpload from '@/components/image-upload/index.vue'
import ImageUpload from '@/components/image-upload/upload.vue'

export default {
  name: 'AddOrganization',
  components: {
    'image-upload': ImageUpload
  },
  props: {
    addOrganizationShow: {
      type: Boolean,
      default: false
    },
    addOrganizationType: {
      type: Object,
      default() {
        return {}
      }
    },
    addOrganizationParentId: {
      type: [String, Number],
      default: ''
    },
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      rules: {
        encode: [
          { required: true, message: '请填写组织编码', trigger: 'blur' }
        ],
        name: [{ required: true, message: '请填写组织名称', trigger: 'blur' }],
        enterpriseCode: [
          { required: true, message: '请填写统一社会信用代码', trigger: 'blur' }
        ],
        tradeType: [
          { required: true, message: '请填写行业属性', trigger: 'blur' }
        ]
      },
      dialogImageUrl: '',
      dialogVisible: false,
      // 行业属性
      tradeTypeList: [
        {
          encode: '0',
          name: '行政单位'
        },
        {
          encode: '1',
          name: '事业单位'
        },
        {
          encode: '2',
          name: '村集体经济组织'
        },
        {
          encode: '3',
          name: '其他'
        }
      ],
      // 组织类型
      typeList: [
        {
          encode: '0',
          name: '常用组织'
        },
        {
          encode: '1',
          name: '总预算组织'
        },
        {
          encode: '2',
          name: '支付中心组织'
        },
        {
          encode: '3',
          name: '统管组织'
        }
      ],
      unitTypeList: [
        {
          encode: '0',
          name: '本级'
        },
        {
          encode: '1',
          name: '下级'
        },
        {
          encode: '2',
          name: '下级财政'
        }
      ],
      organizationInfo: {
        deptName: '', // 对应部门
        address: '', // (string, optional): 单位地址 ,
        areaCode: '', // (string, optional): 行政区划码 ,
        areaName: '', // (string, optional): 行政区划名称 ,
        budgetLevel: '', // (integer, optional): 预算级次 ,
        creator: this.$store.state.user.userid, // (integer, optional),
        curOrgid: this.$store.state.user.orgId, // (integer, optional),
        delFlag: '', // (integer, optional): 删除标志 默认0 ,
        description: '', // (string, optional): 描述 ,
        editor: '', // (integer, optional),
        email: '', // (string, optional): 邮箱 ,
        empowerInfo: '', // (string, optional): 授权加密信息 ,
        enabledmark: '', // (integer, optional): 有效标志 ,
        encode: '', // (string, optional): 编码 ,
        enterpriseAttachment: '', // (string, optional): 统一社会信用附件地址 ,
        enterpriseCode: '', // (string, optional): 统一社会信用代码 ,
        fax: '', // (string, optional): 传真 ,
        finance: '', // (string, optional): 财务负责人 ,
        financeMobile: '', // (string, optional): 联系电话 ,
        formationNum: '', // (integer, optional): 核编人数 ,
        jobNum: '', // (integer, optional): 在职人数 ,
        levels: '', // (integer, optional): 层次 ,
        linkman: '', // (string, optional): 联系人 ,
        linkmanMobile: '', // (string, optional): 联系电话 ,
        manager: '', // (string, optional): 单位负责人 ,
        managerMobile: '', // (string, optional): 联系电话 ,
        name: '', // (string, optional): 组织名称 ,
        ngInsertDt: '', // (string, optional),
        ngRecordVer: '', // (integer, optional),
        ngUpdateDt: '', // (string, optional),
        orderCode: '', // (string, optional): 检索编码（用-区分层级信息） ,
        parentCode: '', // (string, optional): 父编码 ,
        parentid: '', // (integer, optional): 父级id ,
        phid: '', // (integer, optional),
        retireNum: '', // (integer, optional): 离退休人数 ,
        serviceEnddate: '', // (string, optional): 服务期限结束时间 ,
        serviceStartdate: '', // (string, optional): 服务期限开始时间 ,
        sortOrder: '', // (integer, optional): 排序码 ,
        temproaryNum: '', // (integer, optional): 临时人数 ,
        tradeType: '', // (string, optional): 行业属性 ,
        type: '', // (string, optional): 组织类型 ,
        unitNature: '', // (string, optional): 单位性质 ,
        unitType: '', // (string, optional): 单位属性 ,
        verifyDate: '', // (string, optional): 审核时间 ,
        verifyOpinion: '', // (string, optional): 审核意见 ,
        verifyState: '', // (integer, optional): 审核标识
        unitSeal: []
      },
      fileList: [],
      disabled: false // 是否可以操作附件
    }
  },
  inject: ['getOrgList', 'uuid'],
  mounted() {
    if (this.addOrganizationType) {
      this.organizationInfo = {
        ...this.data,
        tradeType: this.data.tradeType + '',
        unitSeal: this.data.unitSeal ? [this.data.unitSeal] : []
      }
    }
  },
  methods: {
    saveOrg() {
      Promise.all([this.$refs.form1.validate(), this.$refs.form2.validate()])
        .then(() => {
          var req, sucmsg, errmsg
          if (this.addOrganizationType) {
            req = updateOrg
            sucmsg = '组织信息修改成功！'
            errmsg = '组织信息修改失败！'
          } else {
            req = addOrg
            sucmsg = '新增成功！'
            errmsg = '新增失败！'
          }
          req(this.handleGetParam(), this.uuid.id)
            .then(res => {
              console.log(res)
              if (res.status) {
                this.getOrgList()
                this.$emit('update:addOrganizationShow', false)
                this.$msgBox.show(sucmsg)
              } else {
                // this.$emit('update:addOrganizationShow', false)
                this.$msgBox.error(res.message)
              }
            })
            .catch(err => {
              console.log(err)
              this.$emit('update:addOrganizationShow', false)
              this.$msgBox.error(errmsg)
            })
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleGetParam() {
      console.log('addOrganizationData', this.addOrganizationData, this.addOrganizationParentId)
      let param = {
        ...this.organizationInfo,
        parentId: this.addOrganizationParentId || '',
        unitSeal: this.organizationInfo.unitSeal.length ? this.organizationInfo.unitSeal[0].filePath : ''
      }
      if (param.tradeType === 2 || param.tradeType === 3) {
        param = {
          encode: param.encode,
          enterpriseCode: param.enterpriseCode,
          manager: param.manager,
          name: param.name,
          tradeType: param.tradeType,
          managerMobile: param.managerMobile,
          parentId: this.addOrganizationParentId || '',
          [this.addOrganizationType && 'phid']: this.organizationInfo.phid
        }
      }
      return param
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    handleRemove(file) {
      console.log(file)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.addOrganization {
  font-size: 0.16rem;
  // min-height: 500px;
  position: relative;
  .infoType {
    height: 30px;
    line-height: 30px;
    background: #f1f1f1;
    > li {
      float: left;
      height: 100%;
      width: 80px;
      cursor: pointer;
      text-align: center;
      &.active {
        background: #fff;
        cursor: default;
        color: #2e91ff;
      }
    }
  }
  .infoContent {
    padding: 20px 20px 40px;
    max-height: 600px;
    overflow: auto;
  }
  .registrationInfo {
    text-align: center;
    > li {
      margin: 0 auto;
      display: inline-block;
      overflow: visible;
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      > div {
        float: left;
        width: 75px;
        text-align: right;
        margin-right: 5px;
        &:nth-of-type(2) {
          float: left;
          width: 700px;
          > div {
            float: left;
            width: 300px;
            > div {
              width: 300px;
            }
            &:last-of-type {
              float: right;
              width: 380px;
              > div {
                width: 75px;
                display: inline-block;
                &:last-of-type {
                  width: 300px;
                }
              }
            }
          }
        }
      }
      .longW {
        width: 700px;
        > div {
          width: 700px !important;
        }
      }
    }
  }
  .attechment {
    height: 410px;
  }
  .stepCon {
    text-align: right;
    color: $blue;
    position: absolute;
    bottom: 10px;
    right: 20px;
    span {
      cursor: pointer;
      margin-left: 20px;
    }
  }
  .red-line {
    height: 1px;
    margin-bottom: 25px;
    background: red;
  }
}
.warningColor {
  color: $pink;
}
</style>
<style>
.addRegist .el-date-editor .el-range-separator {
  width: 20px;
}
</style>
